<template>

    <div class="addType">
        <input type="text" placeholder="可添加3个分类" maxlength="8" v-model="classification">
        <ul>
            <li v-for="(item,index) in classification_arr" :key="index">
                    <span>
                      {{item}}
                      <span class="del_classification_type" @click="classification_arr.splice(index,1)">-</span>
                    </span>
            </li>
        </ul>
        <button @click="classification_add" class="submitType">添加</button>
    </div>

</template>

<script>
export default {
    name: "ArticleEditingType",
    props:['essayType'],
    data(){
        return{
            classification:'',//文章类型
            classification_arr:[],  //所添加的分类
        }
    },
    mounted() {

    },
    methods:{
        classification_add(){
            if( this.classification === "" || this.classification === " "){
                return;
            }
            if(this.classification_arr.length>2){
                alert("最多可添加3个标签")
                return;
            }
            this.classification_arr.push(this.classification)
            this.classification = "";
            this.$emit("handleTypeAdd", this.classification_arr)
        },
    },
    watch:{
        essayType(newValue,oldValue){
            if(newValue!==""){
                this.classification_arr= newValue
            }
        },
        classification(newValue,oldValue){
            if(this.classification.indexOf(" ") !== -1){
                alert("不容许填写空格");
                this.classification=oldValue;
            }
        },
    }
}
</script>

<style scoped>
input{
    outline: none;
    border: 0;
    margin-bottom: 1vh;
    background: transparent;
}
.addType{
    display: flex;
    list-style: none;
    align-items: center;
    flex-wrap: wrap;
}
.addType input{
    border-bottom: 1px solid #8f8c8c;
    width: 120px;
    height: 35px;
}
.addType ul{
    display: flex;
    list-style: none;
    align-items: center;
    flex-wrap: wrap;
}
.addType li span{
    height: 30px;
    padding: 5px 8px;
    background: #29c8e3;
    margin: 3px 5px;
}
.addType li{
    position: relative;
}
.del_classification_type{
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    top: -8px;
    right: -8px;
    width: 15px;
    height: 15px;
    font-size: 18px;
    text-align: center;
    color: #101010;
    border-radius: 50%;
}


.addType li span{
    color: white;
}
.addType li span .del_classification_type {
    position: absolute;
    top: -8px;
    right: -10px;
    width: 15px;
    height: 15px;
    z-index: 99;
    font-size: 14px;
    text-align: center;
    color: #f0f1f5;
    background: #adc6ea !important;
    cursor: pointer;
}
.addType li span .del_classification_type:hover{
    opacity: .8;
}
.submitType{
    padding: 5px;
    border: 0;
    background: #3586f1;
    color: white;
    width: 50px;
    margin-left: 10px;
}
.submitType:hover{
    opacity: .8;
}
</style>